<template>
  <div class="appointment-container">
    <div class="person-container">
      <LeftMenu></LeftMenu>
      <div class="appointment-content">
        <el-card>
          <ManagementTitle>
            <template #title>托管管理</template>
          </ManagementTitle>
          <!--          <el-table :data="formData" border style="width: 100%; margin-top: 16px;">-->
          <!--            <el-table-column prop="license" label="备案证明号" align="center" />-->
          <!--            <el-table-column prop="enterprise" label="备案企业" align="center" />-->
          <!--            <el-table-column prop="location" label="房屋坐落" align="center" />-->
          <!--            <el-table-column prop="rent_way" label="出租方式" align="center" />-->
          <!--            <el-table-column prop="rent_area" label="出租面积" align="center" />-->
          <!--            <el-table-column prop="rent_place" label="租赁部位" align="center" />-->
          <!--            <el-table-column prop="identity_status" label="确认状态" align="center" />-->
          <!--            <el-table-column label="操作" align="center" width="100">-->
          <!--              <template #default>-->
          <!--                <el-button size="small" type="primary">详情</el-button>-->
          <!--              </template>-->
          <!--            </el-table-column>-->
          <!--          </el-table>-->
          <!--          <div class="table-pagination">-->
          <!--            <el-pagination-->
          <!--                background-->
          <!--                layout="total, prev, pager, next"-->
          <!--                :total="formData.length"-->
          <!--                :page-size="pageSize"-->
          <!--                :current-page="currentPage"-->
          <!--                @current-change="handlePageChange"-->
          <!--            />-->
          <!--          </div>-->
        </el-card>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Top from "../../components/home/components/Top.vue";
import Footer from "../../components/home/components/Footer.vue";
import { ref, computed } from "vue";
import ManagementTitle from "@/components/ManagementTitle.vue";
import {useRoute} from "vue-router";
import LeftMenu from "@/user/LeftMenu.vue";

const route = useRoute()

const formData = [
  {
    license: '1111111111zxaasxsa',
    enterprise: '河南科技学院星火工作室',
    location: '新乡市红旗区华兰大道东段',
    rent_way: '整租',
    rent_area: 120,
    rent_place: 2,
    identity_status: '待确认',
  }
];

const currentPage = ref(1);
const pageSize = 5;

const pagedHouseData = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  return formData.slice(start, start + pageSize);
});


function handlePageChange(page: number) {
  currentPage.value = page;
}
</script>
<style scoped>
.appointment-container {
  display: flex;
  flex-direction: column;
}
.person-container {
  max-width: 1290px;
  width: 100%;
  margin: 20px auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 0 16px;
}
.appointment-content {
  margin-left: 10px;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
:deep(.center-header) {
  text-align: center !important;
}
:deep(.el-card) {
  min-height: 831px;
  width: 100%;
  max-width: 100%;
}
.tab-header {
  margin-bottom: 10px;
}
.table-pagination {
  margin: 16px 0 0 0;
  display: flex;
  justify-content: flex-end;
}
:deep(.el-table th) {
  background: #F5F7FA !important;
}
@media (max-width: 900px) {
  .person-container {
    flex-direction: column;
    align-items: stretch;
    padding: 0 4px;
  }
  .appointment-content {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
  }
}
</style>